import React from 'react'
import { Tag, Layout, Button, Popconfirm } from 'antd'
import SaveBox from './SaveBox'
import { connect } from 'react-redux'
import { changeTitle, show } from '../../redux/actionCreator/TabbarActionCreator'
import { setTemp, createNewTemp, changeTempList, saveTemp, changeTempOption, getLuckySheetConf } from '../../redux/actionCreator/lineLossTempActionCreater'
import TempListBox from './TempListBox'
import { logout } from '../../utils/auth/AuthUtils'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
import TempUpLoadFromExcel from './TempUpLoadFromExcel'

// 页头
const { Header } = Layout

function TempHeader (props) {

  // 编程式跳转
  const navigate = useNavigate()
  let { changeTitle, title, show, insertDate, stateId, viewId, setTemp, createNewTemp, changeTempList } = props


  // 召唤对话框的点击事件
  const getModalHandle = (e) => {
    changeTitle(e.target.innerText)
    show()
  }

  return (
    <>
      <Header
        className='temp-header'
        style={{ width: '100%' }}
      >
        <span
          className='tempHeaderTitle'
        >网损月报模板</span>

        <Popconfirm
          title="确认注销?"
          onConfirm={() => {
            logout()
            navigate('/login')
          }}
          onCancel={() => { }}
          okText="退出"
          cancelText="取消"
        >
          <Button
            danger
            className='tempHeaderBtn'
            ghost
          >注销 </Button>
        </Popconfirm>
        <Button
          className='tempHeaderBtn'
          type="primary"
          ghost
          onClick={getModalHandle}
        >保存</Button>

        <Button
          className='tempHeaderBtn'
          type="primary"
          ghost
          onClick={getModalHandle}
        >查看往期模板</Button>

        <Button
          className='tempHeaderBtn'
          disabled={stateId === viewId}
          type="primary"
          ghost
          onClick={() => {
            setTemp(viewId)
          }
          }
        >{stateId === viewId ? "已是模板" : "使用模板"}</Button>

        <Button
          className='tempHeaderBtn'
          onClick={() => {
            let saveOption = window.luckysheet.getAllSheets()
            let date = moment().format('YYYY-MM-DD HH:mm:ss')
            // 插入新数据，此时将新的id传入为viewid，且更新缓存中的日期,并且修改缓存中的模板，使缓存中的模板更新为新的
            createNewTemp(date, viewId, saveOption)

            changeTempList([])

          }}
          type="primary"
          ghost
        >新建模板</Button>
        <TempUpLoadFromExcel></TempUpLoadFromExcel>
        <Tag
          className='headerInfoTag'
          color="magenta">{"最后一次修改于：" + insertDate}</Tag>
      </Header>

      {title === "保 存" ? <SaveBox /> : <TempListBox />}

    </>
  )
}

// 获取公共状态
const mapStateToProps = (state) => {
  return {
    title: state.TabbarReducer.title,
    insertDate: state.LineLossTempReducer.insertDate,
    stateId: state.LineLossTempReducer.stateId,
    viewId: state.LineLossTempReducer.viewId
  }
}

// 修改公共状态的方法
const mapDispatchToProps = {
  changeTitle,
  show,
  setTemp,
  createNewTemp,
  changeTempList,
  saveTemp,
  getLuckySheetConf,
  changeTempOption
}

export default connect(mapStateToProps, mapDispatchToProps)(TempHeader)